<template>
	<div>
		<!-- 选择国家标识弹窗 -->
    <el-dialog 
      title="选择国家标识"
      append-to-body
      :visible.sync="countryLogoDialog"
      :close-on-click-modal="false" 
      :before-close="handleCloseCountryLogo"
      width="60%"
    >

      <el-row>
        <el-col 
          :span="4" 
          v-for="(item, index) in countryLogoList" 
          :key="index"
          class="country_logo_col"
        >
          <div>
            <el-checkbox v-model="checkList" :label="item.bladeFileId">
              <el-image 
                style="width: 100px; height: 100px"
                :src="item.bladeFile.fileUrl">
              </el-image>
            </el-checkbox>
          </div>
        </el-col>
      </el-row>

      <!-- 按钮 -->
      <div class="country_logo_footer">
        <el-button 
          type="primary"
          size="small"
          @click="chooseCountryLogo()">
          确 认
        </el-button>
        <el-button 
          size="small"
          @click="cancelChooesCountryLogo()">
          取 消
        </el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
import { getCountryLogoList } from "@/api/saferisk/riskpoint";

export default {
  props: {
    countryLogoDialog: {default: false},
    uploadList: {default: []}
  },
  data() {
    return {
      countryLogoList: [],
      checkList: []
    }
  },
  watch: {
    countryLogoDialog(){
      if(this.countryLogoDialog === true){
        this.initData();
      }
    }
  },
  mounted() {
    this.getCountryLogos();
  },
  methods: {

    // 获取国家标识列表
    getCountryLogos() {
      getCountryLogoList().then(res => {
        this.countryLogoList = res.data.data;
      });
    },

    // 初始化国家标识弹窗
    initData() {
      this.checkList = [];
    },

    // 选择国家标识
    chooseCountryLogo() {
      if((this.uploadList.length + this.checkList.length) > 3) {
        this.$message.warning("最多可选择3张警示标识!");
        return;
      } 
      var selectLogos = [];
      this.countryLogoList.forEach(item => {
        if(this.checkList.indexOf(item.bladeFileId) >= 0) {
          selectLogos.push(item);
        }
      });
      this.$emit('chooseCountryLogo', selectLogos);
    },

    // 取消选择国家标识
    cancelChooesCountryLogo() {
      this.$emit('cancelChooesCountryLogo');
    },

    // 关闭选择国家标识弹窗
    handleCloseCountryLogo(done) {
      done();
      this.$emit('handleCloseCountryLogo');
    }
  }
}
</script>